<template>
    <div class="bg">
        <nav-com title="我的市场" :showView='showView' @back="backHandler()"></nav-com>
        
        <div class="box_padding">
            <van-row class="myteam_part1">
                <div>
                    <div class="myteam_title">
                        <i></i><span>邀请人</span>
                    </div>
                    <div class="my_part2">
                        <img src="../../assets/m9.png" />
                        <p>{{referralParentFttUser.cellphone}}（{{referralParentFttUser.roleLevel | userRoleLevel}}）</p>
                    </div>
                </div>
                <div v-if="parentFttUser">
                    <div class="myteam_title">
                        <i></i><span>辅导员</span>
                    </div>
                    <div class="my_part2">
                        <img src="../../assets/m9.png" />
                        <p>{{parentFttUser.cellphone}}（{{parentFttUser.roleLevel | userRoleLevel}}）</p>
                    </div>
                </div>
                <div class="myteam_title">
                    <i></i><span>我的市场</span>
                </div>
                <div class="my_part3">
                    <ul>
                        <li @click="referralChildCountHandler">
                            <p>{{referralChildCount}}</p>
                            <span>业务经理</span>
                        </li>
                        <li>
                            <p>{{teamCount}}</p>
                            <span>市场</span>
                        </li>
                    </ul>
                </div>
                <div style="margin-top:4vw;">
                    <van-tabs color="#FF6F4E" @click="childActive(active)" title-active-color="#FF6F4E" v-model="active">
                        <van-tab v-for="(item,index) in tabList" :key="index" :title="item.title">
                            <ul class="teamlist">
                                <li v-for="(item,index) in childFttUsersShow" :key="index">
                                    <div class="teamlist_title">
                                        <p>{{item.createdAt | formatDate}}</p>
                                        
                                    </div>
                                    <div class="teamlist_bottom">
                                        <p>{{item.cellphone}}({{item.roleLevel | userRoleLevel}})</p>
                                        <span style="color:green;">已归属</span>
                                    </div>
                                </li>
                                <van-list v-model="loading" :finished="finished" @load="onload">
                                <li v-for="(item,index) in childUserIdList" :key="'childUserID'+index">
                                    <div class="teamlist_title">
                                        <p>{{item.createdAt | formatDate}}</p>
                                        
                                    </div>
                                    <div class="teamlist_bottom">
                                        <p>{{item.cellphone}}({{item.roleLevel | userRoleLevel}})</p>
                                        <span v-if="item.parentUserId > 0" style="color:green;">已归属</span>
                                        <span v-if="item.parentUserId == 0" style="color:red;">未归属</span>
                                    </div>
                                </li>
                                </van-list>
                            </ul>
                        </van-tab>
                    </van-tabs>
                </div>
            </van-row>
        </div>

    </div>
</template>
<script>
import {getReferralsummary,getFttusers }  from '@/api/api'
import navCom from '@/component/nav'
export default {
    name:'myteam',
    components:{
        navCom
    },
    data() {
        return {
            showView:true,
            uid: weixin.getUserId(),
            active:0,
            tabList:[
                {id:1,title:'市场1部'},
                {id:2,title:'市场2部'},
                {id:3,title:'市场3部'},
            ],
           
            parentFttUser:null,
            referralChildCount:'',//业务经理数量
            teamCount:'',//市场
            childFttUsers:[],//获取市场列表
            childFttUsersShow:[],//显示市场列表
            childUserId:'',//我的市场用户
            childUserIdList:[],//我的市场用户列表
            
            isLoading:false,
            referralParentFttUser:{},
            loading:true,
            finished:false,
            total:0,
            pageNo:1,

        }
    },
    mounted(){
        this.init()
    },
    methods:{
        //返回
        backHandler(){
            this.$router.go(-1)
        },
        onRefresh(){
            this.init()
            this.isLoading = false
        },
        //初始化
        init(){
            getReferralsummary({userId:this.uid}).then(res=>{
                if(res.data.code == 200){
                    
                    this.parentFttUser = res.data.data.parentFttUser || {}
                    this.referralChildCount = res.data.data.referralChildCount
                    this.teamCount = res.data.data.teamCount
                    this.childFttUsers = res.data.data.childFttUsers
                    this.referralParentFttUser = res.data.data.referralParentFttUser || {}
                    this.childFtUserHandler(0)
                    
                }else {
                   this.$dialog.alert({
                        message:res.data.msg
                    })
                }
            })
            
        },
        //数据加载
        onload(){
            let active = this.active
            this.childFtUserHandler(active)
        },
        //切换遍历数据
        childFtUserHandler(val){
           
            this.childFttUsersShow = []
            if(this.childFttUsers.length == 0){
                this.loading = false
                return false
            }
            this.childFttUsers.forEach((item,index)=>{
                    if(index == val ){
                        this.childUserId = item.userId
                        this.childFttUsersShow.push(item)
                        getFttusers({fromUserIdUntilLeaf:this.childUserId,pageNo:this.pageNo,sort:'id DESC'}).then(res=>{
                            if(res.data.code == 200){
                                this.pageNo++
                                this.childUserIdList = this.childUserIdList.concat(res.data.data.rows) 
                                this.total = res.data.data.total

                                if(this.childUserIdList.length < 1 ){
                                    this.finished = true
                                }else if(this.childUserIdList.length >= this.total){
                                    this.finished = true
                                }else {
                                    this.finished = false
                                    this.loading = false
                                }
                                
                            }
                        })
                    }
            })
        },
        //业务经理
        referralChildCountHandler(){
            this.$router.push('/referralChildCount')
        },
        //切换
        childActive(val){
            this.pageNo = 1
            this.childUserIdList = []
            if(val == 0){
                this.childFtUserHandler(val)
            }else if(val == 1){
                this.childFtUserHandler(val)
            }else if(val == 2){
                this.childFtUserHandler(val)
            }
        }
    }
}
</script>
<style scoped>
p {padding:0; margin:0;}
.box_padding {margin-left:3%; margin-right:3%;}
.myteam_part1 {padding-top:4vw;}
.my_part2 {width:100%; background: #fff; border-radius: 1.3vw; margin-top:4vw; height:13.33vw;}
.my_part2  img {float:left; display:block; margin-top:4vw; margin-left:5.3vw; width:5.3vw; height:5.3vw;}
.my_part2 p {float:left; margin-top:4vw; margin-left:2.6vw; color:#222; font-size:4vw;}
.my_part3 {width:100%; background: #fff;  border-radius: 1.3vw; margin-top:4vw; height:21.33vw;}
.my_part3 ul {display: flex; justify-content: space-around;}
.my_part3 ul li {margin-top:4.8vw; }
.my_part3 ul li p {font-size:4.8vw; color:#4e4e4e; text-align: center;}
.my_part3 ul li span {font-size:3.2vw; color:#999;}
.bg {background: #F1F3F6; min-height: 100vh;}
.teamlist {margin:0; height:auto; overflow: hidden; margin-bottom:20vw;}
.teamlist li {background: #fff;  margin-top:4vw; height:auto; overflow: hidden;}
.teamlist_title { border-radius: 1.3vw; border-bottom: 1px solid #e8e8e8; display:flex; justify-content: space-between;  height:8vw; line-height:8vw;}
.teamlist_title p {padding-left:4vw;color:#999;}
.teamlist_title span {padding-right:4vw; color:#ff491f;}
.teamlist_bottom {display: flex; justify-content: space-between; height:12vw; line-height: 12vw;}
.teamlist_bottom p {padding-left:4vw;  color:#333;}
.teamlist_bottom span {padding-right:4vw; color:#FF0000;}
.myteam_title {margin-top:4vw; display:flex;}
.myteam_title i {background: #FF491F; display:block; height: 4vw; width:0.8vw; }
.myteam_title span {font-size:3.7vw; display:block; padding-left:2.6vw; font-weight: bold;}
.van-tab__text {font-size:4vw !important;}
</style>